<template>
   <!-- 3.所有页面添加骨架屏效果 -->
  <van-skeleton title avatar :row="3" :loading="loading">
  <div>
    <!-- 5.实现商城顶部搜索框与nav导航，点击对应nav切换页面并高亮展示
6.切换页面时添加动画效果 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      style="width: 100%"
    >
      <template #action>
        <!-- 8.配置商品分类页面路由，点击右上角分类icon跳转到商品分类页面 -->
        <router-link to="/classify">
            <van-icon name="apps-o" style="font-size: 25px; margin-top: 5px" />
        </router-link>
      </template>
    </van-search>

    <van-tabs v-model:active="active" animated>
      <van-tab v-for="item in tabList" :title="item.text" :key="item">
        <!-- 7.封装轮播图组件并全局注册，推荐页面nav使用轮播图组件 -->
        <Swiper/>
      </van-tab>
    </van-tabs>

    <Tabbar :index="1" />
  </div>
  </van-skeleton>
</template>
<script setup>
import Tabbar from "@/components/Tabbar.vue";
import { ref,onMounted } from "vue";

const active = ref(0);
const tabList = [
    {text:'推荐'},
    {text:'美食'},
    {text:'运动'},
    {text:'保健品'},
    {text:'内衣'},
    {text:'更多'},
]

const loading = ref(true);
onMounted(() => {
  setInterval(() => {
    loading.value = false;
  }, 800);
});
</script>
<style scoped lang='scss'>
a{
    color:#000
}
</style>